<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/order.css">
    <link rel="stylesheet" href="../public/font/iconfont.css">
    <link rel="shortcut icon" href="../public/favicon.ico" >
</head>
<body>
  <div id="app"></div>
  <!-- 头部开始 -->
  <header>
    <!-- 顶部导航 -->
    <div class="topnav">
      <!-- 版心盒子 -->
      <div class="topnav_content">
        <!-- 放置顶部导航的盒子 -->
        <div class="topnav_right">
          <ul>
            <li>
              <a href="javascript:;">请先登录</a>
            </li>
            <li>
              <a href="javascript:;">免费注册</a>
            </li>
            <li>
              <a href="javascript:;">我的订单</a>
            </li>
            <li>
              <a href="javascript:;">会员中心</a>
            </li>
            <li>
              <a href="javascript:;">帮助中心</a>
            </li>
            <li>
              <a href="javascript:;">关于我们</a>
            </li>
            <li>
              <a href="javascript:;">
                <span class="toutiao">&#xe60a; </span>手机版</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 顶部导航结束 -->
      <!-- 导航栏 -->
    </div>

    <!-- 顶部导航结束 -->
    <!-- 导航栏 -->
    <div class="block-nav">
      <div class="nav w">
        <!-- 版心盒子 -->
        <div class="nav-content w">
          <!-- 放置logo的盒子 -->
          <div class="nav-left">
            <h1>
              <a href="">logo</a>
            </h1>
          </div>
          <!-- 中间导航部分 -->
          <div class="nav-center">
            <ul>
              <li>
                <a href="javascript:;">首页</a>
              </li>
              <li>
                <a href="javascript:;">居家</a>
              </li>
              <li>
                <a href="javascript:;">美食</a>
              </li>
              <li>
                <a href="javascript:;">服饰</a>
              </li>
              <li>
                <a href="javascript:;">母婴</a>
              </li>
              <li>
                <a href="javascript:;">个护</a>
              </li>
              <li>
                <a href="javascript:;">严选</a>
              </li>
              <li>
                <a href="javascript:;">数码</a>
              </li>
              <li>
                <a href="javascript:;">运动</a>
              </li>
              <li>
                <a href="javascript:;">杂项</a>
              </li>
            </ul>
          </div>
          <!-- 右边导航部分 -->
          <div class="nav-right">
            <span class="toutiao">&#xe63b; </span>
            <input type="text" placeholder="搜一搜" />
            <div id="none-shop">
              <span class="toutiao" id="gouwuche">&#xe649; </span>
              <i id="count">0</i>
              <!-- 隐藏购物车盒子 -->
              <div class="none-shop active">
                <div class="tri">
                  <div class="trangle"></div>
                  <div class="trangle1"></div>
                </div>
                <div class="top">
                  <ul>

                  </ul>
                </div>
                <div id="bottom">
                  <div class="total">
                    <span class="title">共1件商品</span>
                    <span class="price">￥2303.00</span>
                  </div>
                  <div class="input">
                    <button id="input">去购物车结算</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏导航栏 -->
    <div class="none-nav active">
      <div class="nav w">
        <!-- 版心盒子 -->
        <div class="nav-content w">
          <!-- 放置logo的盒子 -->
          <div class="nav-left">
            <h1>
              <a href="">logo</a>
            </h1>
          </div>
          <!-- 中间导航部分 -->
          <div class="nav-center">
            <ul>
              <li>
                <a href="javascript:;">首页</a>
              </li>
              <li>
                <a href="javascript:;">居家</a>
              </li>
              <li>
                <a href="javascript:;">美食</a>
              </li>
              <li>
                <a href="javascript:;">服饰</a>
              </li>
              <li>
                <a href="javascript:;">母婴</a>
              </li>
              <li>
                <a href="javascript:;">个护</a>
              </li>
              <li>
                <a href="javascript:;">严选</a>
              </li>
              <li>
                <a href="javascript:;">数码</a>
              </li>
              <li>
                <a href="javascript:;">运动</a>
              </li>
              <li>
                <a href="javascript:;">杂项</a>
              </li>
            </ul>
          </div>
          <!-- 右边导航部分 -->
          <div class="none-right">
            <!-- <span class="toutiao">&#xe63b; </span>
          <input type="text" placeholder="搜一搜" />
          <span class="toutiao" id="gouwuche">&#xe649; </span>
          <i id="count"></i> -->
            <ul>
              <li>
                <a href="javascript:;" id="brand" class="brand">品牌</a>
              </li>
              <li>
                <a href="javascript:;" id="theme" class="theme">专题</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏导航栏结束 -->

    <!-- 导航栏结束 -->
  </header>
  <!-- 头部结束 -->
    <div class="order bx">
        <!-- 左边部分 -->
        <div class="order_left">
            <div class="account">
                <h4>我的账户</h4>
                <a href="../html/personalCenter.html" class="a"><i>●</i> 个人中心</a>
                <a href="javascript:;" class="a"><i>●</i> 消息通知</a>
                <a href="javascript:;" class="a"><i>●</i> 个人信息</a>
                <a href="javascript:;" class="a"><i>●</i> 安全设置</a>
                <a href="javascript:;" class="a"><i>●</i> 地址管理</a>
                <a href="javascript:;" class="a"><i>●</i> 我的积分</a>
                <a href="javascript:;" class="a"><i>●</i> 我的足迹</a>
                <a href="javascript:;" class="a"><i>●</i> 邀请有利</a>
                <a href="javascript:;" class="a"><i>●</i> 幸运抽奖</a>
            </div>
            <div class="account">
                <h4>交易管理</h4>
                <a href="../html/order.html" class="a"><i>●</i> 我的订单</a>
                <a href="javascript:;" class="a"><i>●</i> 优惠券</a>
                <a href="javascript:;" class="a"><i>●</i> 礼品卡</a>
                <a href="javascript:;" class="a"><i>●</i> 评价晒单</a>
                <a href="javascript:;" class="a"><i>●</i> 售后服务</a>
            </div>
            <div class="account">
                <h4>我的收藏</h4>
                <a href="javascript:;" class="a"><i>●</i> 收藏的商品</a>
                <a href="javascript:;" class="a"><i>●</i> 收藏的专题</a>
                <a href="javascript:;" class="a"><i>●</i> 关注的品牌</a>
            </div>
            <div class="account">
                <h4>帮助中心</h4>
                <a href="javascript:;" class="a"><i>●</i> 帮助中心</a>
                <a href="javascript:;" class="a"><i>●</i> 在线客服</a>
            </div>
        </div>
        <!-- 右边部分 -->
        <div class="order_right">
            <nav></nav>
            <div class="order_list">
                <!-- <div class="order_box">
                    <div class="order_top">
                        <span>
                            <span class="time">下单时间：2022-02-07 00:05:20</span>
                            <span>订单编号：62205697599</span>
                        </span>
                        <div><i class="toutiao icon-shijian-xianxing"></i>付款截止：<span class="countdown">30分00秒</span></div>
                    </div>
                    <div class="order_bottom">
                        <div class="product">
                            <div>
                                <img src="	https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg" alt="">
                                <p>
                                  麦瑞克家用轻音智能多功能彩屏跑步机S450 <br>
                                  <span>规格：多功能</span>
                                  <span>款式：蓝屏</span>
                                </p>
                                <span class="money">￥2303.00</span>
                                <span class="count">×1</span>
                            </div>
                            <div>
                                <img src="	https://yanxuan-item.nosdn.127.net/a5d745bbe067ca2468cdb2948f4f10ca.jpg" alt="">
                                <p>
                                  麦瑞克家用轻音智能多功能彩屏跑步机S450 <br>
                                    <span>规格：多功能</span>
                                    <span>款式：蓝屏</span>
                                </p>
                                <span class="money">￥2303.00</span>
                                <span class="count">×1</span>
                            </div>
                        </div>
                        <div class="obligation">
                            <p>待付款</p>
                        </div>
                        <div class="order_price">
                            <p>￥4606.00</p>
                            <div>(含运费：￥10.00)</div>
                            <div>在线支付</div>
                        </div>
                        <div class="payment">
                            <button>立即付款</button>
                            <a href="#">查看详细</a>
                            <a href="#">取消订单</a>
                        </div>
                    </div>
                </div> -->
    
  <!-- 尾部开始 -->
  <div class="footer">
    <div class="footerContent">
      <ul class="footerBox">
        <li>
          <p>客户服务</p>
          <div class="tubiao">
            <div class="iconBox">
              <i class="iconfont">&#xe661;</i>
              <p>在线客服</p>
            </div>
            <div class="iconBox">
              <i class="iconfont">&#xe600;</i>
              <p>问题反馈</p>
            </div>
          </div>
        </li>

        <li>
          <p>关注我们</p>
          <div class="tubiao">
            <div class="iconBox">
              <i class="iconfont">&#xe65c;</i>
              <p>公众号</p>
            </div>
            <div class="iconBox">
              <i class="iconfont">&#xe65d;</i>
              <p>微博</p>
            </div>
          </div>
        </li>

        <li class="download">
          <p>下载APP</p>
          <div class="title">
            <div>
              <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt="" />
            </div>
            <div>
              <span>扫描二维码</span>
              <span>立马下载APP</span>
              <a href="#">下载页面</a>
            </div>
          </div>
        </li>

        <li class="fuwu">
          <p>服务热线</p>
          <div>
            <span> 400-0000-000 </span>
            <span>周一至周日 8:00-18:00</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 尾部结束 -->
  <!-- 底部开始 -->
  <div class="bottom">
    <div class="content">
      <div class="character">
        <a href="javascript:;">
          <i class="iconfont">&#xe6e5;</i>
          <span>价格亲民</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont">&#xe60e;</i>
          <span>物流快捷</span>
        </a>
        <a href="javascript:;">
          <i class="iconfont">&#xe665;</i>
          <span>品质新鲜</span>
        </a>
      </div>
      <div class="copyright">
        <p>
          <a href="javascript:;">关于我们</a>
          <a href="javascript:;">帮助中心</a>
          <a href="javascript:;">售后服务</a>
          <a href="javascript:;">配送与验收</a>
          <a href="javascript:;">商务合作</a>
          <a href="javascript:;">搜索推荐</a>
          <a href="javascript:;">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜儿</p>
      </div>
    </div>
  </div>
  <!-- 底部结束 -->
    <script src="../js/dialog.js"></script>
    <script src="../js/common.js"></script>
    <script type="module" src="/main.js"></script>
    <script src="../js/order.js"></script>
    <script src="../js/topRegisters.js"></script>
    <script src="../js/goto.js"></script>
</body>
</html>